<template lang="pug">
  .main-menu
    .menu-item(v-for="(item, index) in menus" :class="{'active':curMenu===item.key}")
        .menu-name(@click="changeMenu(item)") {{item.name}}
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'MainMenu',
  computed: {
    ...mapState({ // 这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      curMenu: state => state.pageStatus.curMenuName
    })
  },
  data () {
    return {
      // - menus: ['全局概览', '钻孔信息', '剖面分析', '地质模型', '地表建筑'],
      menus: [
        { name: '全局概览', key: 'GlobalOverview' },
        { name: '站点分布', key: 'SiteInfo' },
      ]
    }
  },
  mounted () {
    // 地图加载完成
    this.$bus.$once('mapIsInit', e => {
      olMap.once('postrender', (event) => {
        console.log('完成渲染')
        // this.curMenuChange('globalOverview')
        setTimeout(() => { this.leftPanelHide(false) }, 400)
      })
    })
  },
  methods: {
    ...mapMutations('pageStatus', [
      'curMenuChange',
      'leftPanelHide'
    ]),
    changeMenu (menu) {
      if (this.curMenu === menu.key) return
      this.curMenuChange(menu.key)
      console.log('菜单切换：', menu)
    }

  }
}
</script>

<style lang="stylus" scoped>
.main-menu
    width fit-content
    position: absolute;
    display: flex;
    top: 12px;
    height: 42px;
    right: 90px;
    font-size: 16px;
    color: #000000;
    line-height: 42px;
    z-index 999
    .menu-item
        width 80px
        text-align center
        &.active
            color #2783e2
            font-weight 700
            font-size: 18px;
            &:hover
                color #2783e2
        &:hover
            color #2783e2
        .menu-name
            cursor pointer

</style>
